<template>
  <el-card>
    <el-button type="primary" @click="addPlayer">添加球员</el-button>
    <el-table :data="tableData" border style="width: 100%;margin: 20px 0;">
      <el-table-column prop="num" label="号码" width="150" align="center" />
      <el-table-column prop="name_ch" label="中文名" align="center" />
      <el-table-column prop="name_en" label="英文名" align="center" />
      <el-table-column prop="age" label="年龄" align="center" />
      <el-table-column prop="position" label="位置" align="center" />
      <el-table-column prop="country" label="国家" align="center" />
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button type="info" size="small" @click="editPlayer(scope.row)">编辑</el-button>
          <el-button type="danger" size="small" @click="removePlayer(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- <CircleChart :data="[20, 7, 6, 5, 4]" /> -->
  </el-card>
  <el-dialog v-model="dialogVisible" :title="dialogTitle" width="30%" :before-close="handleClose">
    <el-form :model="form" label-width="80px" :size="formSize" ref="ruleFormRef" :rules="rules">
      <el-form-item label="中文名" prop="name_ch">
        <el-input v-model="form.name_ch" style="width: 250px;" />
      </el-form-item>
      <el-form-item label="英文名" prop="name_en">
        <el-input v-model="form.name_en" style="width: 250px;" />
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input v-model="form.age" style="width: 250px;" />
      </el-form-item>
      <el-form-item label="号码" prop="num">
        <el-input v-model="form.num" style="width: 250px;" />
      </el-form-item>
      <el-form-item label="位置" prop="position">
        <el-input v-model="form.position" style="width: 250px;" />
      </el-form-item>
      <el-form-item label="国家" prop="country">
        <el-input v-model="form.country" style="width: 250px;" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="confirm(ruleFormRef)">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { onMounted, ref, reactive } from 'vue'
import { getDataListSync, removePlayerSync, addPlayerSync, editPlayerSync } from '../api/index'
import { ElMessage } from 'element-plus'

const tableData = ref([])
const dialogVisible = ref(false)
const form = ref({
  name_ch: '',
  name_en: '',
  num: '',
  age: '',
  position: '',
  country: ''
})

const initForm = ref({
  name_ch: '',
  name_en: '',
  num: '',
  age: '',
  position: '',
  country: ''
})

const getDataList = () => {
  getDataListSync().then(res => {
    tableData.value = res.data
  })
}

const removePlayer = (id) => {
  removePlayerSync(id).then(res => {
    if (res.status == 200 || res.status == 201) {
      getDataList()
      ElMessage.success('删除成功')
    }
  })
}

onMounted(() => {
  getDataList()
})

const handleClose = () => {
  dialogVisible.value = false
  form.value = { ...initForm }
  ruleFormRef.value.clearValidate()
}

const formSize = ref('default')

const ruleFormRef = ref()

const rules = reactive({
  name_ch: [
    { required: true, message: '请输入球员中文名', trigger: 'blur' }
  ],
  name_en: [
    { required: true, message: '请输入球员英文名', trigger: 'blur' }
  ],
  num: [
    { required: true, message: '请输入球衣号码', trigger: 'blur' }
  ],
  age: [
    { required: true, message: '请输入球员年龄', trigger: 'blur' }
  ],
  position: [
    { required: true, message: '请输入球员位置', trigger: 'blur' }
  ],
  country: [
    { required: true, message: '请输入球员国家', trigger: 'blur' }
  ]
})

const dialogTitle = ref('添加球员')

const addPlayer = () => {
  dialogTitle.value = '添加球员'
  dialogVisible.value = true
  ruleFormRef.value.clearValidate()
  form.value = { ...initForm }
}

const editPlayer = (data) => {
  dialogTitle.value = '编辑球员'
  form.value = { ...data }
  ruleFormRef.value.clearValidate()
  dialogVisible.value = true
}

const confirm = async (formEL) => {
  // if(!formEL) return
  // await formEL.validate((valid) => {
  //   if (valid) {
      if (dialogTitle.value == '添加球员') {
        addPlayerSync(form.value).then(res => {
          if (res.status == 200 || res.status == 201) {
            dialogVisible.value = false
            getDataList()
            ElMessage.success('添加成功')
          }
        })
      } else {
        editPlayerSync(form.value.id, form.value).then(res => {
          if (res.status == 200 || res.status == 201) {
            dialogVisible.value = false
            getDataList()
            ElMessage.success('编辑成功')
          }
        })
      }
  //   } else {
  //     ElMessage.warning('请填写完整')
  //   }
  // })
}


</script>